
<template>
    <div class="office">
        <el-form ref="form" :model="office" label-width="250px"  :inline="true" >

            <el-row>
                <el-col :span="20">
                    <div class="office-logo">
                    <el-form-item label="公司logo:" >
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadFilePath"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :on-error="uploadError"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="office.officeLogo" :src="office.officeLogo" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="公众号地址:">
                        <el-input v-model="office.officeWechat" maxlength="255" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司名称:">
                        <el-input v-model="office.officeName" maxlength="255" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属领域:">
                        <el-input v-model="office.officeField" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司人员:">
                        <el-input v-model="office.officePersonnnel"  :rules="[{ type: 'number', message: '人员必须为数字值'}]" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="法定代表人:">
                        <el-input v-model="office.officeLegal" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="注册资金:">
                        <el-select v-model="office.officeMoney" placeholder="请选择" style="width:500px">
                            <el-option
                                    v-for="item in officeMoneyItem"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="办公电话:">
                        <el-input v-model="office.officeTel" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="统一信用号码:">
                        <el-input v-model="office.creditNumber" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="负责人:">
                        <el-input v-model="office.chargePerson" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人手机号:">
                        <el-input v-model="office.chargePhone" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="12">
                    <el-form-item label="负责人邮箱:">
                        <el-input v-model="office.chargeEmail" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司地址:">
                        <el-input v-model="office.officeAddress" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="公司介绍:">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="office.officeIntroduce" style="width:1350px"></el-input>
                </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="公司详细介绍:">
                        <quill-editor ref="myQuillEditor" v-model="office.officeIntroduceDetail" :options="editorOption" class="officeIntroduce-detail" style="width:1350px">
                        </quill-editor>
                        <el-upload v-show="false" ref="upload" class="upload-demo" :action="uploadFilePath" :on-success="editorSubImage":on-error="uploadError"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label=" ">
                        <el-button type="primary" @click="submitOffice">保存信息</el-button>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>


    </div>
</template>


<script>
    import officeApi from '@/api/office/officeApi'

    export default {
        name: "OfficeList",
        data(){
            return{
                uploadFilePath:process.env.VUE_APP_REQUEST_URL+'/a/core/file/fileUpload',
                editorOption: { // 富文本编辑器配置
                    placeholder: '请在这里输入',
                    modules: {
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                                // ['blockquote', 'code-block'], // 引用，代码块
                                [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
                                [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                                [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                                [{ 'direction': 'rtl' }], // 文本方向
                                [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
                                [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                                [{ 'font': [] }], // 字体
                                [{ 'align': [] }], // 对齐方式
                                ['clean'], // 清除字体样式
                                ['image'] // 上传图片、上传视频
                            ],
                            handlers: {
                                'image': function(value) {
                                    if (value) {
                                        document.querySelector('.office .upload-demo input').click()
                                    } else {
                                        this.quill.format('image', false)
                                    }
                                }
                            }
                        }
                    },
                    theme: 'snow'
                },
                officeMoneyItem:[
                    {
                        value: '1',
                        label: '10万以下'
                    },
                    {
                        value: '2',
                        label: '10-50万'
                    },
                    {
                        value: '3',
                        label: '50-500万'
                    },
                    {
                        value: '4',
                        label: '500-1000万'
                    },
                    {
                        value: '5',
                        label: '1000万以上'
                    }

                ],
                office:{
                    id:'0010a5ad4b4e1293bb005199c2c8cb31',
                    officeLogo:'',
                    officeWechat:'',
                    officeName:'',
                    officeField:'',
                    officePersonnnel:'',
                    officeLegal:'',
                    officeMoney:'',
                    officeAddress:'',
                    officeIntroduce:'',
                    officeIntroduceDetail:'',
                    officeTel:'',
                    creditNumber:'',
                    chargePerson:'',
                    chargePhone:'',
                    chargeEmail:'',
                }
            }
        },
        methods: {
           async submitOffice(){
                let res = await officeApi.saveOffice(this.office)
               if (res.code == "200"){
                   this.$message.success('保存成功')
                   this.office = res.data
               }else {
                   this.$message.error(res.msg)
               }
            },
            handleAvatarSuccess(res, file) {
               if (res.code=='200'){
                   this.office.officeLogo =res.data;
               }else {
                   this.uploadError();
               }

            },
            editorSubImage(res, file){
                const quill = this.$refs.myQuillEditor.quill
                if (res.code === "200" && res.data !== null) {
                    const length = quill.getSelection().index // 获取光标所在位置
                    quill.insertEmbed(length, 'image', res.data) // 插入图片
                    quill.setSelection(length + 1) // 调整光标位置到最后
                } else {
                    this.uploadError();
                }
            },
            uploadError() {
                this.$message.error('上传失败')
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created:async function () {
           let res =  await officeApi.getOffice(this.office.id)
            if (res.code == "200" && res.data != null){
                this.office = res.data
            }
        }
    }
</script>

<style scoped>
    .office-logo{
        margin: auto;
        text-align: center;
    }
    input{
        width: 500px !important;
    }
    .officeIntroduce-detail{
        height: 600px;
        margin-bottom: 100px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>